<template>
  <!-- 顶部导航栏 -->
  <NavTop title="值得买"></NavTop> 
  <!-- 背景图和轮播图区域 -->
  <div class="swiper_wrapper">
    <div class="backimg">
      <!-- 背景图区域 -->
      <img class="back_image_text1" src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
      <div class="back_image_text2">严选好物&nbsp;用心生活</div>
      <img class="back_image1" src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">
      <!-- 轮播图区域 -->
      <van-swipe :autoplay="0" :width="88.75" class="buy_swiper" indicator-color="red" :loop="false">
        <van-swipe-item class="swiper_item" v-for="(item, index) in newSwiperList" :key="index">
          
          <div class="icon_wrapper">
            <a :href="item[0].columnUrl" class="icon_item">
              <div class="icon_img">
                <img :src="item[0].picUrl" alt="">
              </div>
              <div class="icon_text">
                <div class="text1">{{ item[0].mainTitle }}</div>
                <div class="text2">{{ item[0].viceTitle }}</div>
              </div>
            </a>
            <a :href="item[1].columnUrl" class="icon_item">
              <div class="icon_img">
                <img :src="item[1].picUrl" alt="">
              </div>
              <div class="icon_text">
                <div class="text1">{{ item[1].mainTitle }}</div>
                <div class="text2">{{ item[1].viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
        <template #indicator="{active, total}">
          <div class="indicators">
            <div :class="{
              active: active === index
            }" v-for="(item,index) in (total>4? total-3: 0)"></div>
          </div>
        </template>
      </van-swipe>
    </div>
  </div>

  <!-- 瀑布流区域 -->
  <div class="waterfall_wrapper">
    <van-list class="column_wrapper " v-model="loading" :finished="finished" error-text="请求失败，点击重新加载" @load="onLoad">
      <div class="column_wrapper_inside">
        <div class="waterfall_column1">
          <div class="waterfall_item" v-for="item in waterfallStatus1" :key="item.topicId">
            <div class=" img_wrapper">
              <img :src="item.picUrl" alt="">
            </div>
            <div class="title">{{ item.subTitle }}</div>
            <div class="text_wrapper">
              <div class="text_wrapper_item">
                <div class="avatar_nickname">
                  <div class="avatar">
                    <img :src="item.avatar" alt="">
                  </div>
                  <div class="nickname">{{ item.nickname }}</div>
                </div>
                <div class="icon_readcount">
                  <div class="icon"><img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt=""></div>
                  <div class="viewnumber">{{ Math.trunc(item.readCount/1000)+'K' }}</div>
                </div>
      
              </div>
            </div>
          </div>
        </div>
        <div class="whiteblock"></div>
        <div class="waterfall_column2">
          <div class="waterfall_item" v-for="item in waterfallStatus2" :key="item.topicId">
            <div class=" img_wrapper">
              <img :src="item.picUrl" alt="">
            </div>
            <div class="title">{{ item.subTitle }}</div>
            <div class="text_wrapper">
              <div class="text_wrapper_item">
                <div class="avatar_nickname">
                  <div class="avatar">
                    <img :src="item.avatar" alt="">
                  </div>
                  <div class="nickname">{{ item.nickname }}</div>
                </div>
                <div class="icon_readcount">
                  <div class="icon"><img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt=""></div>
                  <div class="viewnumber">{{ Math.trunc(item.readCount/1000)+'K' }}</div>
                </div>
      
              </div>
            </div>
          </div>
        </div>

      </div>

    </van-list>
  </div>
  <BackTopTo></BackTopTo>
</template>

<script setup lang="ts">
// 引入
import { onMounted, ref, computed, watch } from 'vue';
import { getSwiperData, getWaterfallData, type navListType, type waterfallDataType } from '../../api/buying'


// 定义响应式数据
const swiperStatus = ref<navListType[]>([])
const waterfallStatus1 = ref<waterfallDataType[]>([])
const waterfallStatus2 = ref<waterfallDataType[]>([])
const loading = ref(true)
const page = ref(2)
const finished = ref(false)
let flag = true
// 生命周期函数
onMounted(() => {
  swiperData()
  waterfallData()
})
// 请求函数
const swiperData = async () => {
  try {
    const result = await getSwiperData()
    if (Number(result.code) == 200) {
      swiperStatus.value = result.data.navList
      // console.log(swiperStatus)
    }
  } catch (error) {
    console.error(error)
  }
}
const waterfallData = async () => {
  if (flag) {
    try {
      flag = false
      const result = await getWaterfallData(page.value)
      if (Number(result.code) == 200) {
        waterfallStatus1.value.push(...result.data.result[0].topics)
        waterfallStatus2.value.push(...result.data.result[1].topics)
        flag = true
      }
    } catch (error) {
      console.error(error)
    }
  }

}
// 计算属性
const newSwiperList = computed(() => {
  let index = 0;
  let count = 2;		//两个一组
  let arrTemp = [];
  let experts = swiperStatus.value;
  for (let i = 0; i < experts.length; i++) {
    index = parseInt(i / count);
    if (arrTemp.length <= index) {
      arrTemp.push([]);
    }
    arrTemp[index].push(experts[i])
  }
  // console.log(arrTemp)
  return arrTemp
}
)
// 定义触底函数
const onLoad = () => {
  if (flag) {
    page.value++
    waterfallData()
    console.log("触发了防抖函数")
  }
}
// 监听
watch([waterfallStatus1, waterfallStatus2], () => {
  loading.value = false
})

</script>

<style scoped lang="less">

div[data-v-fd93bce0].indicators{
  position: absolute;
  display: flex;
  top: 93%;
  // margin: 0 auto;
  left: 50%;
  transform: translateX(-50%); 
  div{
    width:15px ;
    height: 2px;
    margin: 0 2px;
    background-color: #eeeeee;
  }
  div.active{
      background-color: red;
    }
}

.swiper_wrapper {
  width: 100%;
  height: 370px;
  background-color: #eeeeee;
  position: relative;

  .backimg {
    position: absolute;
    top: 0;
    left: 0px;

    .back_image_text1 {
      width: 65px;
      height: 34.5px;
      position: absolute;
      left: 6px;
      top: 30px;
    }

    .back_image_text2 {
      width: 124.45px;
      height: 22px;
      position: absolute;
      left: 73px;
      top: 39.5px;
      color: white;
      font-size: 15px;
      line-height: 22px;
      font-family: PingFangSC-Regular;
    }

    .back_image1 {
      width: 375px;
      height: 259px;
    }

    // 轮播图数据
    .buy_swiper {
      width: 355px;
      height: 270px;
      border-radius: 12px;
      margin: 0 auto;
      background-color: white;
      position: absolute;
      top: 75px;
      left: 10px;

      .swiper_item {

        // background-color: aquamarine;
        .icon_wrapper {
          box-sizing: border-box;
          padding: 18px 3px 3px 3px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 90px;
          height: 235px;
          // background-color: bisque;

          .icon_item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .icon_img {
              img {
                width: 60px;
                height: 60px;
              }
            }

            .icon_text {
              .text1 {
                font-size: 14px;
                font-weight: bold;
                font-family: PingFang-SC-Bold;
                color: black;
              }

              .text2 {
                font-size: 12px;
                font-family: PingFang-SC-Bold;
                color: grey;
              }
            }
          }
        }

      }
    }

  }
}

// 瀑布流样式
.waterfall_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 410px;
  background-color: #eeeeee;
  padding-bottom: 70px;

  .column_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .column_wrapper_inside {
      display: flex;
      justify-content: center;
      .waterfall_column1 {
        // float: left;
        width: 172.5px;
        display: flex;
        flex-direction: column;

        .waterfall_item {
          background-color: white;
          border-radius: 12px;
          overflow: hidden;
          width: 172.5px;
          margin-bottom: 10px;

          .img_wrapper {
            img {
              width: 172.5px;
            }
          }

          .title {
            width: 171.5px;
            // height: 29px;
            font-size: 13px;
            padding: 9px 8px 0;
            box-sizing: border-box;
            display: flex;

          }

          .text_wrapper {
            margin: 12px 8px;
            height: 44.5px;
            display: flex;
            align-items: center;
            .text_wrapper_item {
              display: flex;
              box-sizing: border-box;
              justify-content: space-between;
              line-height: 24px;
              height: 24px;
              .avatar_nickname{
                display: flex;
                width: 88px;
                .avatar{
                  img{
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                  }
                }
                .nickname {
                margin-left: 5px;
                color: #7f7f7f;
                font-size: 13px;
                font-family: PingFangSC-Light;
              }
              }
              .icon_readcount{
                display: flex;
                width: 50px;
                .icon{
                  img{
                    width: 16px;
                    height: 16px;
                  }
                }
                .viewnumber {
                color: #7f7f7f;
                font-size: 12px;
                font-family: PingFangSC-Light;
              }

              }

             
            }
          }
        }
      }

      .whiteblock {
        width: 10px;
      }

      .waterfall_column2 {
        // float: left;
        width: 172.5px;
        display: flex;
        flex-direction: column;

        .waterfall_item {
          background-color: white;
          border-radius: 12px;
          overflow: hidden;
          width: 172.5px;
          margin-bottom: 10px;

          .img_wrapper {
            img {
              width: 172.5px;
            }
          }

          .title {
            width: 171.5px;
            // height: 29px;
            font-size: 13px;
            padding: 9px 8px 0;
            box-sizing: border-box;
            display: flex;

          }

          .text_wrapper {
            margin: 12px 8px;
            height: 44.5px;
            display: flex;
            align-items: center;
            .text_wrapper_item {
              display: flex;
              box-sizing: border-box;
              justify-content: space-between;
              line-height: 24px;
              height: 24px;
              .avatar_nickname{
                display: flex;
                width: 88px;
                .avatar{
                  img{
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                  }
                }
                .nickname {
                margin-left: 5px;
                color: #7f7f7f;
                font-size: 13px;
                font-family: PingFangSC-Light;
              }
              }
              .icon_readcount{
                display: flex;
                width: 50px;
                .icon{
                  img{
                    width: 16px;
                    height: 16px;
                  }
                }
                .viewnumber {
                color: #7f7f7f;
                font-size: 12px;
                font-family: PingFangSC-Light;
              }

              }

             
            }
          }
        }
      }
    }



  }

}
</style>